<template>
  <div>
    <section class="mevaluate_goods">
      <section class="mevaluate_goods_le">
        <a href="">
          <img v-if="lists.is_compress==1"
               :src="lists.pic_url+'80x80'"
               width="80"
               height="80">
          <img v-else
               :src="lists.pic_url"
               width="80"
               height="80">
        </a>
        <span></span>
      </section>
      <section class="mevaluate_goods_ri g-flex">
        <!-- TODO 跳转处理 -->
        <a @click="jumpTo(lists.item_id)">{{lists.title}}</a>
        <p>{{lists.sku_id}}</p>
      </section>
    </section>
    <section class="mevaluate_text">
      <textarea name="detail"
                v-model="comment"
                placeholder="请填写试用报告，以帮助我们改进产品！"
                style="height:150px;"></textarea>
    </section>
    <section class="msettlement_but">
      <button type="button"
              class="butorange butorange_tryComment"
              @click="submitComment(lists.item_try_id,lists.try_order_id)">提交评价</button>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { tryComment, tryCommentDo } from '@/api/user/member/memberApi'

export default Vue.extend({
  data() {
    return {
      lists: {},
      comment: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    // TODO 小程序跳转修改
    jumpTo(detailId) {
        window.open('/item-detail?detailId=' + detailId)
    },
    init() {
      this.$loadingWrap.show()
      const id = this.$route.query.id
      tryComment({ id: id }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.lists = res.data.lists
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 提交评价
    submitComment(itemId, tryOrderId) {
      if (this.comment == '') {
        this.$Error('请输入评价内容！')
        return false
      }
      const data = {
        item_try_id: itemId,
        try_order_id: tryOrderId,
        details: this.comment
      }
      this.$loadingWrap.show()
      tryCommentDo(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('评价成功！')
          setTimeout(() => {
            // TODO 处理返回
              wx.navigateBack({
                delta: 1
              })
          }, 1000)
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>


<style lang="scss">
.mevaluate_goods {
  width: 100%;
  padding: 16px 0;
  margin-top: 20px;
  overflow: hidden;
  display: flex;
  .mevaluate_goods_le {
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    margin-left: 20px;
    img {
      width: 160px;
    }
  }
  .mevaluate_goods_ri {
    height: 160px;
    padding: 0 16px;
    a {
      display: block;
      height: 64px;
      line-height: 32px;
      color: #333;
      overflow: hidden;
      margin-bottom: 10px;
    }
    p {
      line-height: 40px;
      color: #999;
    }
  }
}
.mevaluate_text {
  margin: 0 20px;
  overflow: hidden;
  textarea {
    width: 100%;
    border: 2px solid #e9e9e9;
    padding: 1% 3%;
    height: 140px;
    resize: none;
  }
}
.msettlement_but {
  margin: 20px;
  overflow: hidden;
  .butorange {
    display: block;
    width: 100%;
    margin: 30px 0;
    background: -moz-linear-gradient(to left, #ff7400, #ff4c00);
    background: -webkit-linear-gradient(to left, #ff7400, #ff4c00);
    background: -o-linear-gradient(to left, #ff7400, #ff4c00);
    background: -ms-linear-gradient(to left, #ff7400, #ff4c00);
    background: linear-gradient(to left, #ff7400, #ff4c00);
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 80px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    border: 0;
  }
}
</style>